<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/4/9
  Time: 14:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax示例</title>
<%--    引入jquery库文件--%>
    <script type="text/javascript" src="plugins/jquery-1.12.4/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">

        // ajax原理流程图：https://www.processon.com/view/link/5e8eb7a0e401fd675ba07d5e

        function doAjax() {

            // 原生的ajax请求： get请求、post请求
            // 1、创建一个ajax的引擎对象  XMLHttprequest 对象
            var xmlhttp;
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            // 2、将请求委托给ajax引擎；
            /*
            ajax数据如何传递给服务器？
                非ajax是通过提交form表单进行数据传递的；
                ajax有两种方式：get请求：使用 url传参即可；
                              post请求，需要在send方法中传递固定格式的参数键值对即可；
             */
            xmlhttp.open("GET", "AjaxDemoServlet?userName=zhangsan&userAge=20", true); // true表示开启异步处理
            ///3、ajax引擎发送请求到服务器；
            xmlhttp.send(); // ajax引擎发送请求到服务器
            // ajax引擎接收服务器的响应并根据服务器响应的状态码，判定本次请求的结果状态；
            // 在ajax引擎上有一个状态码监听事件，这个事件可以绑定一个处理函数； 【类似给一个控件绑定一了一个 click 事件】
            ///4、ajax引擎使用回调函数，通知浏览器客户端【局部刷新浏览器客户端的数据】
            xmlhttp.onreadystatechange = function () {
                // 服务器状态码 为 200 ok ； ajax引擎对象 状态码 为 4 时候，需要服务器的影响完成了，并且是成功的
                // ajax引擎的 responseText 属性是 服务器发送过来的 响应信息内容
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    // 执行ajax引擎的回调处理，这里是用来进行业务逻辑处理的【类似 thread 类的 run 方法； 类似于 servlet的service方法】
                    document.getElementById("lblMsg").innerHTML = xmlhttp.responseText;
                }
            }
        }

        ////////////////////////////////////////////////////////////////////////////////////////////
        function doJqueryAjax(){
            // jquery实现ajax的操作
            $.ajax({
                type: "GET", // 请求方式
                url: "AjaxDemoServlet?userName=lisi&userAge=21", // 请求的服务器路径
                //data: "name=John&location=Boston", // post请求的数据参数
                datatype:"text", // 服务器响应的内容类型
                success: function(data){ // ajax请求成功时的回调函数
                    // 这里是进行ajax业务逻辑处理的地方
                    // 执行ajax引擎的回调处理，这里是用来进行业务逻辑处理的【类似 thread 类的 run 方法； 类似于 servlet的service方法】
                    document.getElementById("lblMsg2").innerHTML = data;
                },
                error: function (){
                    // ajax请求发生非错误时的回调函数
                }
            });
        }

    </script>
</head>
<body>
<div>

<input type="button" name="ajaxdemo" value="ajaxdemo" onclick="doAjax()">
<label id="lblMsg"></label>
</div>
<br>
<div>
<input type="button" name="jqueryajaxdemo" value="ajaxdemo" onclick="doJqueryAjax()">
<label id="lblMsg2"></label>
</div>
</body>
</html>
